<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/2.3.4/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.3.4/index.js"></script>
    <!--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@smallwei/avue@2.0.4/lib/index.min.js"></script>-->
    <script type="text/javascript" src="https://gitee.com/smallweigit/avue/raw/master/lib/avue.js"></script>
</head>

<body>
<div id="app">
    <avue-crud ref="crud"
               :data="tableData"
               :option="tableOption">
        <template slot="menu"
                  slot-scope="scope">
            <el-button type="text"
                       icon="el-icon-check"
                       size="mini"
                       plain
                       @click="myBtn(scope.row,scope.index)">自定义按钮
            </el-button>
        </template>
    </avue-crud>
<!--    <el-dialog title="自定义Form"-->
<!--               :visible.sync="showTestForm">-->
<!--        <avue-form :option="testFormOption"-->
<!--                   ref="testFormData"-->
<!--                   v-model="testFormData"-->
<!--                   @submit="handleTestForm()">-->
<!--        </avue-form>-->
<!--    </el-dialog>-->
    <el-dialog title="自定义Form"
               :visible.sync="showTestForm"
               width="50%"
               lock-scroll>
        <div class="pull-auto">
            <avue-form :option="testFormOption"
                       ref="testFormData"
                       v-model="testFormData"
                       @submit="handleTestForm">
            </avue-form>
        </div>
    </el-dialog>
</div>
</body>
<script src="js/data.js"></script>
<script src="js/option.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        compoents: {},
        data: {
            tableData: data,
            tableOption: option,
            testFormData: {},
            testFormOption: testOption,
            showTestForm: false,
        },
        mouted() {},
        computed: {},
        methods: {
            handleTestForm: function (form, done) {
                console.log(form)
                this.showTestForm = false
                done()
            },
            myBtn: function (row, index) {
                this.testFormData.testName = row.username
                this.showTestForm = true
            },
        }
    })
</script>
